<template>
  <div class="app-container">
    <div class="ProductionDynamic">
      <!-- 头部 -->
      <div class="ProductionDynamicHeader">
        <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" @Launchform="Launchform" />
      </div>

      <!-- 主体 -->
      <div class="ProductionDynamicMain">
        <el-card class="ProductionDynamicMainCard" shadow="always" :body-style="{ padding: '5' }">
          <!-- card body -->
          <!-- 表格 -->
          <div class="ProductionDynamicMainCardMain">
            <div class="ProductionDynamicMainCardMainLeft">
              <h1 class="MainLeftCardH1">易耗品出库查询</h1>
              <Table :tableData="TableData" :tableHeader="tableHeader" :TableHeight="95" />
            </div>
          </div>

          <!-- 分页器 -->
          <PageModule style="margin-top: 15px" :PageData="{ total }" @pageChange="handleSizeChange" @pageSizeChange="handleCurrentChange" />
        </el-card>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'QueryConsumablesOutOfWarehouseKa'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ObtainConsumableDeliveryData, FindTable } from '@/api/GeneralManager/Factoryinquiry/ConsumableOutboundQuery'
import type { TableDataT, ConsumableParameterInterface } from '@/api/GeneralManager/Factoryinquiry/ConsumableOutboundQuery'
import { onMounted, ref } from 'vue'
import type { formListType } from '@/components/Find/index.vue'

const formList = ref<any>([
  {
    type: 'input',
    inputPlaceholder: '请输出库单号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入物料编码',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'select',
    selectLabel: '',
    selectOptions: [],
    selectP: '部门'
  },
  {
    type: 'select',
    selectLabel: '',
    selectOptions: [],
    selectP: '分类'
  },
  {
    type: 'select',
    selectLabel: '',
    selectOptions: [],
    selectP: '出库原因'
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '出库日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

// 表格数据
const TableData = ref<TableDataT[]>()

// 需要收集的数据
const dataCollection = ref<ConsumableParameterInterface>({
  pageNum: 1,
  pageSize: 40,
  slipNo: '',
  slipReason: '',
  slipStartDate: '',
  slipEndDate: '',
  deptName: '',
  mtlNo: '',
  mtlName: '',
  lotNo: '',
  typeNo: ''
})

const GetDepartmentData = async () => {
  let NewArray = []
  const result = await FindTable()
  formList.value[3].selectOptions = EvaluatesTheArrayReturnValue(result.dept)
  NewArray = result.type.reduce<any>((arr, item) => {
    if (item.typeName && item.typeNo) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.typeName + ' ' + item.typeNo)
    }
    return arr
  }, [])
  formList.value[4].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
  formList.value[5].selectOptions = EvaluatesTheArrayReturnValue(result.reason)
}

const total = ref<number>(0)

const ConsumableTableData = async () => {
  const result = await ObtainConsumableDeliveryData(dataCollection.value)
  TableData.value = result.outDtos
  total.value = result.total
}

// 统一调用接口
const interAceFunct = () => {
  // 耗品入库查询
  ConsumableTableData()

  // Find下拉框数据
  GetDepartmentData()
}

onMounted(() => {
  interAceFunct()
})

const tableHeader = ref([
  {
    label: '出库单号',
    prop: 'slipNo',
    width: '118px'
  },
  {
    label: '出库日期',
    prop: 'slipDate',
    width: '99px'
  },
  {
    label: '出库原因',
    prop: 'slipReason',
    width: '73px'
  },
  {
    label: '部门名称',
    prop: 'deptName',
    width: '85px'
  },
  {
    label: '指令',
    prop: 'lotNo',
    width: '85px'
  },
  {
    label: '物料编号',
    prop: 'mtlNo',
    width: '85px'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor',
    width: '85px'
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    width: '137px'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    width: '175px'
  },
  {
    label: '数量',
    prop: 'qty',
    width: '85px'
  },
  {
    label: '备注',
    prop: 'remark',
    width: '210px'
  },
  {
    label: '仓管员',
    prop: '""sysUser',
    width: '85px'
  }
])

// 分页器

const handleSizeChange = (val: number) => {
  dataCollection.value.pageNum = val
  ConsumableTableData()
}
const handleCurrentChange = (val: number) => {
  dataCollection.value.pageSize = val
  ConsumableTableData()
}

const Launchform = (val: any) => {
  console.log(val)
  dataCollection.value.slipNo = val[0].inputValue
  dataCollection.value.mtlNo = val[1].inputValue
  dataCollection.value.mtlName = val[2].inputValue
  dataCollection.value.lotNo = val[6].inputValue
  dataCollection.value.slipStartDate = val[7]?.dateValue[0]
  dataCollection.value.slipEndDate = val[7]?.dateValue[1]
  dataCollection.value.typeNo = val[4].selectValue?.split(' ')[1]?.trim()
  dataCollection.value.deptName = val[3].selectValue
  dataCollection.value.slipReason = val[5].selectValue
  ConsumableTableData()
}

const findClicked = (find: any) => {
  if (find === '置空') {
    clearFormList1()
  }
}

const clearFormList1 = () => {
  formList.value.forEach((item: any) => {
    if (item.type === 'input') {
      item.inputValue = ''
    } else if (item.type === 'select') {
      item.selectValue = ''
    }
    // Add other conditions for different form item types
  })
}
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}

.ProductionDynamicMain {
  margin-top: 10px;
}
</style>
